.clearfix:after{
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}             

* html .clearfix{ zoom: 1; } /* IE6 */
*:first-child+html .clearfix{ zoom: 1; } /* IE7 */
.clearfix, .gain-layout{
   *zoom:1;
}

body{
    font-family: arial,sans-serif;
    color: #454545;
    padding-bottom: 20px;
}

.the-header .fixed{
    background-color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    filter: alpha(opacity=95);
    -moz-opacity: 0.95;
    -khtml-opacity: 0.95;
    opacity: 0.95;    
}
.top-bar{
    height: 70px;
    line-height: 70px;
    margin: 0 auto 10px;
    max-width: 62.5rem;
    z-index: 1000000;
    background-color: #fff;
}

    .top-bar .name{
        height: 70px;
    }

        .top-bar .name h1{
            font-family: 'Petit Formal Script', Helvetica, sans-serif;
            font-size: 1.5rem;
            line-height: 70px;
        }

            .top-bar .name h1 a{
                color: #000;
                font-weight: 800;
            }

.top-bar .toggle-topbar.menu-icon a{
    color: #000;
}

.top-bar .toggle-topbar.menu-icon a::after{
    content: "";
    position: absolute;
    right: 0;
    display: block;
    width: 16px;
    top: 0;
    height: 0;
    -webkit-box-shadow: 0 10px 0 1px #000, 0 16px 0 1px #000, 0 22px 0 1px #000;
    box-shadow: 0 10px 0 1px #000, 0 16px 0 1px #000, 0 22px 0 1px #000;
    
}

.top-bar.expanded .title-area{
    background: #fff;
    border-bottom: 5px solid #2E6CC5;
}

.top-bar.expanded .top-bar-section li a:not(.button){
    line-height: 1.3;
}

.logo{
    background: url("/static/img/sprite.png") no-repeat -8px -296px;
    width: 48px;
    height: 50px;
    display: block;
    float: left;
    text-indent: -9999px;
    margin-top: 10px;
    margin-right: 10px;
}

.ivillage,
.ivillage:hover{
    color: rgb(212,59,44);
}

.nbcuni,
.nbcuni:hover{
    color: rgb(31,35,109);
}

.ivillage:hover,
.nbcuni:hover{
    text-decoration:underline;
}

.site-name{
    display: block;
}

.top-bar > .row{
    max-width: 62.5rem;
}

.top-bar-section ul{
    background: #fff;
}

.top-bar-section ul li > a {
    font-size: 1rem;
}
.top-bar-section li a:not(.button){
    line-height: 70px;
    background: #fff;
    color: #000;
}
.top-bar-section li a:hover:not(.button){
    background: #fff;
    color: #00b200;
}

.intro{
    padding: 20px;
    line-height: 1.5;
    /* background-color: #307DD3;*/
    /*background-color: #3B97F6;*/
    color: #fff;
    font-size: 1.1875rem;
    text-align: center;
    text-shadow: -1px -1px #000;
    margin-bottom: 20px;
}

.blue-gradient{
    background: #3b97f6; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #3b97f6 26%, #307dd3 68%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(26%,#3b97f6), color-stop(68%,#307dd3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #3b97f6 26%,#307dd3 68%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #3b97f6 26%,#307dd3 68%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #3b97f6 26%,#307dd3 68%); /* IE10+ */
    background: linear-gradient(135deg,  #3b97f6 26%,#307dd3 68%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b97f6', endColorstr='#307dd3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.highlight{
    font-family: 'Petit Formal Script', Helvetica, sans-serif;
    font-weight: 800;
    text-shadow: 1px 2px #000;
    font-size: 1.5rem;
}

.me{
    text-align: center;
    padding: 0 0 10px 0;
}

.me .socials,
.contact-me{
    padding: 0 0 15px 0;
}

.shadow-box-maker {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 20px;
    -webkit-box-shadow: 0 0 27px rgba(50,50,50,0.75);
    -moz-box-shadow: 0 0 27px rgba(50,50,50,0.75);
    box-shadow: 0 0 27px rgba(50,50,50,0.75);
    z-index: 1;
    background-color: transparent;
    border-radius: 10px;
}

.shadow-green {
    -webkit-box-shadow: 0 0 27px rgba(67,155,11,0.75);
    -moz-box-shadow: 0 0 27px rgba(67,155,11,0.75);
    box-shadow: 0 0 27px rgba(67,155,11,0.75);
}

.socials{
    position: relative;
    min-height: 132px;
    width: 150px;
    margin: 0 auto;
}

.socials > div{
    position: absolute;
    float: left;
    top: -3px;
}

.socials > div.ln{
    left: 2px;
}
.socials > div.fb{
    left: 30px;
}
.socials > div.tw{
    left: 86px;
}
.socials > div.gp{
    left: 58px;
}
.socials > div.drupal{
    left: 114px;
}



.socials .the-line{
    display: block;
    width: 2px;
    border-left: 2px solid #000;
    margin-left: 15px;
}

.socials .ln .the-line{
    height: 40px;
    border-color: #1C5DA2;
}
.socials .fb .the-line{
    height: 80px;
    border-color: #1F63A3;
}
.socials .gp .the-line{
    height: 20px;
    border-color: #C82820;
}
.socials .tw .the-line{
    height: 100px;
    border-color: #3499D9;
}
.socials .drupal .the-line{
    height: 60px;
    border-color: #2E6ED7;
}




.socials > div > a{
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    display: block;
}

.socials .fb a{
    background: url("/static/img/sprite.png") no-repeat -8px -152px;
}
.socials .tw a{
    background: url("/static/img/sprite.png") no-repeat -8px -362px;
}
.socials .ln a{
    background: url("/static/img/sprite.png") no-repeat -8px -248px;
}
.socials .gp a{
    background: url("/static/img/sprite.png") no-repeat -8px -200px;
}
.socials .drupal a{
    background: url("/static/img/sprite.png") no-repeat -8px -56px;
}


.italic{
    font-style: italic;
}

.quote{
    font-size: 1.2rem;
    position: relative;
    z-index: 98;
}

.title{
    line-height: 1.5;
    margin: 0 15px 10px 0px;
    font-style: italic;
    text-align: left;
    border-bottom: 1px solid #00b200;
    font-weight: 800;
    font-family: 'Petit Formal Script', Helvetica, sans-serif;
    color: #000;
}

.title:first-letter{
    color: #00b200;
    font-size: 1.4rem;
}

.side-title{
    line-height: 1.5;
    margin: 0 0 10px 0;
/*    font-style: italic;*/
    text-align: left;
    border-bottom: 1px solid #00b200;
/*    font-weight: 800;*/
    font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    color: #000;
/*    font-size: 20px;*/
}

.side-title:first-letter{
    color: #00b200;
/*
    font-size: 1.4rem;
*/
}

.sub-title{
    text-align: right;
    margin: 0 15px 8px 15px;
    font-family: 'Petit Formal Script', Helvetica, sans-serif;
}

.side-content-box{
    border: 1px solid #e6e6e6;
    margin-top: 32px;
    padding: 10px;
}

.right-rail .module{
    margin-bottom: 35px;
}

.right-rail .title{
    border-bottom: medium none;
    margin: 0;
    line-height: 1;
    padding: 5px 10px;
    width: auto;
    background-color: #00b200;
    color: #fff;
    float: left;
    font-family: Arial;
    font-style: normal;
    font-weight: normal;
/*    text-transform: uppercase;*/
    font-size: 14px;
    border-radius: 5px 5px 0 0;
}
.right-rail .title:first-letter{
    color: #fff;
    font-family: 'Petit Formal Script', Helvetica, sans-serif;
}

.sidebar{}
.sidebar ul{
    list-style: none;
    margin: 0px 0px 20px 5px;
}

.sidebar ul li{}
.sidebar ul li h4{
    float: left;
    font-size: 14px;
    width: 200px;
}
.sidebar ul li h4.full-width{
    width: 100%;
}

.rating{
    width: 84px;
    height: 16px;
    float: right;
    background: url("/static/img/rating_sprite.png") no-repeat;
    margin-top: 4px;
}
.rating.rate-5{background-position: 0 -171px;}
.rating.rate-4_5{background-position: 0 -152px;}
.rating.rate-4{background-position: 0 -133px;}
.rating.rate-3_5{background-position: 0 -114px;}
.rating.rate-3{background-position: 0 -95px;}
.rating.rate-2_5{background-position: 0 -76px;}
.rating.rate-2{background-position: 0 -57px;}
.rating.rate-1_5{background-position: 0 -38px;}
.rating.rate-1{background-position: 0 -19px;}
.rating.rate-0{background-position: 0 0;}

.resume{
    font-size: 14px;
}

.resume .side-title{
    text-align: right;
}

.resume p, .resume ul{
    line-height: 1.5;
    font-size: 14px;
}

.resume ul{
    margin-left: 25px;
}

.resume .my-pic{
    border-radius:50%;
    margin-left: 15px;
    margin-bottom: 15px;
}

.resume h4{
    font-weight: 800;
    font-size: 16px;
}

.resume ul.work-ex{
    font-size: 12px;
}

.first-page{
    margin-top: 30px;
}

.message{
    display: block;
    border-radius: 10px;
    padding: 20px 25px;
    line-height: 1.6;
    margin-bottom: 40px;
    position: relative;
    z-index: 98;
}

.message:first-letter{
    color: #00b200;
    font-size: 1.6rem;
    font-family: 'Petit Formal Script', Helvetica, sans-serif;    
}

.first-blue:first-letter{
    color: #3b97f6;
}

.about-me{
    padding: 0 20px;
    line-height: 1.6;
    font-size: 1.3rem;
    margin-top: 50px;
}

.about-me strong{
/*
    font-weight: normal;
    color: #00b200;
*/
}

.my-name{
    font-family:'Oleo Script', Helvetica, sans-serif;
    font-size: 1.5rem;
    font-style:italic;
}

.about-me span.italic{
    font-family: 'Petit Formal Script', Helvetica, sans-serif;    
}

.about-me > p{
    margin-bottom: 30px;
    font-size: 1.3rem;
    line-height: 1.4;
}

.mail-me{
    background: url("/static/img/sprite.png") no-repeat -8px -104px;
    line-height: 32px;
    padding-left: 40px;
    margin-bottom: 5px;
    font-size: 0.8rem;
}

.call-me{
    background: url("/static/img/sprite.png") no-repeat -8px -8px;
    line-height: 32px;
    padding-left: 40px;
    font-size: 0.8rem;
}

.light {
    display: block;
    z-index: 98;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    padding: 1px 9px;
    top: 0px;
    left: 0px;
    height: 0px;
}

.my-pic:hover .light{
	
	padding:1px 5px;
  
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    -khtml-animation-name: shine;
    -khtml-animation-duration: 0.6s;
    -khtml-animation-timing-function: linear;
    -moz-animation-name: shine;
    -moz-animation-duration: 0.6s;
    -moz-animation-timing-function: linear;
    -o-animation-name: shine;
    -o-animation-duration: 0.6s;
    -o-animation-timing-function: linear;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    left:45px;
}

@-webkit-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }
}

@-khtml-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }
}

@-moz-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }
}

@-o-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }
}

@-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: 5px; }
    20% { top: 25px; }
    30% { top: 45px; }
    40% { top: 65px; }
    50% { top: 85px; }
    60% { top: 65px; }
    70% { top: 45px; }
    80% { top: 25px; }
    90% { top: 5px; }
    100% { top:-15px; left:45px; transform: rotate(-360deg); }
}

.skills{
    border: 1px solid black;
    width: 500px;
    display:block;
    height: 500px;
    margin: 0 auto;
}
.footer{
    width: 100%;
/*
    position: fixed;
    bottom: 0px;
*/
    background-color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    filter: alpha(opacity=95);
    -moz-opacity: 0.95;
    -khtml-opacity: 0.95;
    opacity: 0.95;
}

.footer .copyright{
    border-top: 2px solid #00b200;
    padding: 7px 0px;
    font-size: 0.7rem;
    text-align: center;
}

/* SMALL AND MEDIUM SCREEN */
@media only screen and (max-width: 1024px) {
    .message{
        
    }
}

/* MEDIUM SCREEN ONLY */
@media only screen and (min-width: 641px) and (max-width: 1024px) {
/*
    .right-rail .me,
    .right-rail .contact-me{
        float: left;
        width: 48%;
    }

    .right-rail .me{
        margin-right: 2%;
    }

    .right-rail .contact-me{
        margin-left: 2%;
    }
*/
}

/* SMALL SCREEN ONLY */
@media only screen and (max-width: 640px) {
    .intro{
        padding-top: 20px;
    }

    .about-me {
        padding-left: 0px;
    }

    .about-me > p{
        border-left: 5px solid #00b200;
        padding-left: 20px;
        font-size: 1.2rem;
    }
}

.skillset{
    margin: 0px !important;
    z-index: 98;
}

.skillset_page .message{
    padding: 0px;
    background-color: #f7fafe;
}

.skillset_page .first-page{
    margin-top: 24px;
}

.skillset .col-1{
    z-index: 98;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
}

.skillset .col-2{
    z-index: 98;
    background-color: #f3f7fd;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
}

.skillset .col-3{
    z-index: 98;
    background-color: #f3f7fd;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}

.skillset .col-4{
    z-index: 98;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
}

/* SMALL SCREEN ONLY */
@media only screen and (max-width: 640px) {
    .skillset .col-1{
        -webkit-border-top-right-radius: 10px;
        -moz-border-radius-topright: 10px;
        border-top-right-radius: 10px;
    }

    .skillset .col-2{
        -webkit-border-top-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        border-top-right-radius: 0px;
    }

    .skillset .col-3{
        background-color: transparent;
        -webkit-border-bottom-left-radius: 0px;
        -moz-border-radius-bottomleft: 0px;
        border-bottom-left-radius: 0px;
    }

    .skillset .col-4{
        background-color: #f3f7fd;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-left-radius: 10px;
    }

    .top-bar-section ul li > a{
        margin-left: 15px;
        margin-right: 15px;
        border-bottom: 1px solid #00b200;
        width: auto;
    }

    .top-bar-section ul li:last-child > a{
        border-bottom: medium none;
    }
}

.skillset .title{
    margin: 10px 0 10px 0;
    border-bottom: 1px solid #2E6CC5;
}

.skillset .title:first-letter{
    color: #2E6CC5;
}

.skillset ul{
    text-align: left;
    list-style-type: square;
}

.skillset ul li{
    line-height: 32px;
}